<script setup>
import { CloseOutlined } from '@ant-design/icons-vue';
import { h } from 'vue';
import AssignPeople from '@/components/func/assignPeople.vue';
import { specialRoomListCommon } from '@/components/roomConstant/common.js';

const props = defineProps({
  tableData: {
    type: Array,
    default: () => []
  },
});
const tabs = [
  {
    label: '房屋用途',
    key: 'roomUseType',
  },
  // {
  //   label: '使用单位',
  //   key: 'roomUseUnit',
  // },
];
const drawerOpen = ref(false);
const activeKey = ref();
const emits = defineEmits(['clickType', 'close']);
const columns = [
  {
    title: '颜色',
    dataIndex: 'color',
    align: 'center',
    customRender: ({ text }) => {
      return h('div', {
        style: {
          backgroundColor: text,
          width: '40px',
          height: '20px',
          borderRadius: '5px',
          margin: '0 auto'
        }
      });
    },
  },
  {
    title: '房屋用途',
    dataIndex: 'name',
    align: 'center',
  },
  {
    title: '数量(个)',
    dataIndex: 'count',
    align: 'center',
  },
  {
    title: '面积(㎡)',
    dataIndex: 'area',
    align: 'center',
    customRender: ({ text }) => {
      return text.toFixed(2);
    }
  },
];

const specialRoomTableData = ref([]);
const specialRoomList = JSON.parse(JSON.stringify(specialRoomListCommon));

const specialRoomHandle = () => {
  Object.keys(specialRoomList).forEach((key) => {
    Object.entries(specialRoomList[key]).forEach(([keyItem, valueItem]) => {
      specialRoomList[key][keyItem] = {
        name: valueItem.name,
        color: valueItem.color,
        count: 0,
        area: 0,
      };
    });
  });
  return specialRoomList;
};

const specialRoomDetail = (type) => {
  if (activeKey.value === type) return;
  activeKey.value = type;
  drawerOpen.value = true;
  emits('clickType', {
    isRoomView: true,
    type: type,
    data: specialRoomList[type]
  });
};

const closeDrawer = () => {
  drawerOpen.value = false;
  activeKey.value = null;
  emits('close');
};

const assign = (data) => {
  emits('clickType', data);
  drawerOpen.value = false;
  activeKey.value = null;
};

watch(() => props.tableData, (newValue) => {
  specialRoomTableData.value = newValue;
});

onMounted(() => {
  specialRoomHandle();
});
</script>

<template>
  <div class="special-container">
    <div class="btn">
      <a-button type="link" @click="specialRoomDetail('roomUseType')">查看房屋用途</a-button>
      <assign-people :drawerOpen="drawerOpen" @assign="assign" />
    </div>
    <a-drawer
        :open="drawerOpen"
        placement="bottom"
        size="default"
        :getContainer="false"
        @close="closeDrawer"
        :mask="false"
        :height="250"
        :closable="false"
        :bodyStyle="{padding:'0px 10px',overflow:'hidden'}"
    >
      <a-tabs v-model:activeKey="activeKey" @tabClick="specialRoomDetail" :tabBarStyle="{margin:'0'}">
        <template #rightExtra>
          <a-button type="dashed" shape="circle" @click="closeDrawer" :icon="h(CloseOutlined)"></a-button>
        </template>
        <a-tab-pane v-for="item in tabs" :key="item.key" :tab="item.label">
          <a-table
              :columns
              :data-source="specialRoomTableData"
              size="small"
              :scroll="{y: 1000}"
          ></a-table>
        </a-tab-pane>
      </a-tabs>
    </a-drawer>
  </div>
</template>

<style lang="scss" scoped>
.special-container {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  pointer-events: none;
  //border: 2px solid red;

  .btn {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
    z-index: 1;
    pointer-events: auto;
    //border: 2px solid red;

    :deep(.ant-btn) {
      padding: 5px 10px;
      font-size: 13px;
      border: 2px solid #8183a5;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  :deep(.ant-table-body) {
    height: 165px;
  }
}
</style>
